<template>
  <div class="my-feedback">
    <header>
      <h2 class="title">My Feedback</h2>
    </header>
    <div v-if="isEmpty" class="empty">
      <svg-icon class="empty-icon" icon-class="empty-feedback"></svg-icon>
      <p>No feedback.</p>
    </div>
    <main v-else>
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabledLoad"
        infinite-scroll-delay="520"
        infinite-scroll-distance="10"
        infinite-scroll-immediate="false"
      >
        <!-- @click="toDetail(item)" -->
        <li v-for="item of list.rows" :key="item.feedbackId">
          <!-- 用户消息对话框 -->
          <dl class="msgbox-user">
            <dt>
              <div class="info">
                <h3 class="name" v-text="userInfo.authorName"></h3>
                <p
                  class="date"
                  v-text="
                    utils.dateFormat(item.createTime, 'MM-DD-YYYY HH:MM:SS')
                  "
                ></p>
              </div>
              <el-avatar :src="userInfo.coverUrl">
                <img src="@/assets/images/visitor-avatar.png" />
              </el-avatar>
            </dt>
            <dd>
              <p class="content" v-text="item.feedbackContent"></p>
            </dd>
          </dl>
          <!-- 客服消息 -->
          <dl class="msgbox-service" v-show="item.state == 0">
            <dt>
              <el-avatar src="@/assets/images/service-avatar.png"> </el-avatar>
              <div class="info">
                <h3 class="name">Customer Service</h3>
                <p
                  class="date"
                  v-text="
                    utils.dateFormat(item.modifyTime, 'MM-DD-YYYY HH:MM:SS')
                  "
                ></p>
              </div>
            </dt>
            <dd>
              <p class="content" v-text="item.replyContent"></p>
            </dd>
          </dl>
        </li>
      </ul>
      <el-button @click="dialogVisible = true" class="reply">Reply</el-button>
    </main>
    <el-dialog
      title="Reply"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <div class="send-feedback">
        <div class="feedback-text">
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 12 }"
            placeholder="What problems do you encounter? Please give feedback here and we will deal with them as soon as possible."
            v-model="replyParams.feedbackContent"
          >
          </el-input>
        </div>
        <div class="feedback-email">
          <el-input
            placeholder="Write your email address here."
            type="email"
            v-model="replyParams.email"
          ></el-input>
        </div>
        <a
          class="toFacebookPage"
          :href="url"
          target="_blank"
          rel="noopener noreferrer"
          >Give us screensho feedback on Facebook >
        </a>
        <el-button
          @click="sendFeedBack"
          class="submit"
          :disabled="disabledSubmit"
          >Submit</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      list: {}, //反馈列表数据
      params: {
        pageNum: 1,
        pageSize: 3,
      },
      scrollTop: 0,
      isDetail: false, // 是否打开详情
      detailData: {}, //详情数据
      isEmpty: false, //是否为空
      dialogVisible: false, //dialog反馈弹窗
      replyParams: {
        feedbackContent: "", //反馈内容
        email: "",
      },
      url: "https://www.facebook.com/FishNovel-246415817262219", //Facebook的公共主页
      loading: false, //加载更多
    };
  },
  components: {},
  computed: {
    ...mapGetters(["userInfo"]),
    //禁用Submit按钮
    disabledSubmit() {
      if (this.checkSpecialKey(this.replyParams.feedbackContent)) {
        return false;
      } else {
        return true;
      }
    },
    // 加载完成
    noMore() {
      return this.list.current >= this.list.pages;
    },
    // 禁止加载
    disabledLoad() {
      return this.loading || this.noMore;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.feedbackList();
  },
  methods: {
    //获取反馈列表
    async feedbackList() {
      let res = await this.$api.home.feedbackList(this.params);
      if (res.code === 1) {
        if (res.source.total == 0) {
          this.isEmpty = true;
          return;
        }
        this.loading = false;
        if (this.list.rows) {
          let obj = res.source;
          this.list.current = obj.current;
          this.list.rows = this.list.rows.concat(obj.rows);
        } else {
          this.list = res.source;
        }
        console.log(this.list);
      }
    },
    // 发送反馈
    async sendFeedBack() {
      let res = await this.$api.home.sendFeedBack(this.replyParams);
      if (res.code === 1) {
        this.feedbackList();
        this.dialogVisible = false;
        this.$message({
          message: "Successful",
          duration: "1500",
          type: "success",
        });
        this.replyParams = {
          feedbackContent: "",
          email: "",
        };
      }
    },
    // 校验输入框
    checkSpecialKey(str) {
      if (str.trim() != "") {
        let specialKey =
          "[`~!@#$%^&*()_-=+|{}':;'\\[\\].<>《》/?~！#￥……&*（）——|{}【】‘；：”“'\"。，、？]‘'";
        for (let i = 0; i < str.length; i++) {
          if (specialKey.indexOf(str.substr(i, 1)) == -1) {
            return true;
          }
        }
        return false;
      } else {
        return false;
      }
    },
    // 下拉加载
    load() {
      this.loading = true;
      this.params.pageNum += 1;
      this.feedbackList();
    },
    // 返回顶部
    backTop() {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 50);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-feedback {
  > header {
    .title {
      font-size: 24px;
      font-family: Poppins-SemiBold, Poppins;
      font-weight: 600;
      color: #000000;
      line-height: 40px;
    }
  }
  > main {
    padding: 24px 0;
    .list {
      margin-bottom: 74px;
      > li {
        display: flex;
        flex-direction: column;
        > dl {
          margin: 28px 0;
          > dt {
            display: flex;
            align-items: center;
            .info {
              margin: 0 21px;
              font-family: PingFangSC-Medium, PingFang SC;
              .name {
                font-size: 18px;
                font-weight: 500;
                color: #000000;
                line-height: 25px;
              }
              .date {
                margin-top: 3px;
                font-size: 14px;
                font-weight: 500;
                color: #999999;
                line-height: 20px;
              }
            }
            .el-avatar {
              width: 80px;
              height: 80px;
            }
          }
          > dd {
            margin-top: 10px;
            .content {
              width: 834px;
              height: auto;
              word-wrap: break-word;
              box-sizing: border-box;
              padding: 27px 25px 18px;
              font-size: 18px;
              border-radius: 8px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #000000;
              line-height: 29px;
            }
          }
          &.msgbox-user {
            > dt {
              text-align: right;
              justify-content: flex-end;
            }
            > dd {
              .content {
                background: rgba(232, 195, 100, 0.1);
              }
            }
          }
          &.msgbox-service {
            > dt {
              text-align: left;
              justify-content: flex-start;
            }
            > dd {
              .content {
                background: rgba(232, 100, 114, 0.1);
              }
            }
          }
        }
      }
    }
    .reply {
      width: 193px;
      height: 46px;
      position: absolute;
      bottom: 38px;
      left: 0;
      right: 0;
      margin: auto;
      border-width: 0;
      background: #e86472ff;
      border-radius: 6px;
      font-size: 20px;
      color: #fff;
      font-family: Poppins-Medium, Poppins;
    }
  }
  > .empty {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .empty-icon {
      width: 240px;
      height: 195px;
    }
    > p {
      margin-top: 31px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 23px;
    }
  }
  ::v-deep .el-dialog {
    width: 794px;
    border-radius: 16px;
    .el-dialog__header {
      padding: 20px 32px;
      .el-dialog__title {
        font-size: 24px;
        font-family: Poppins-SemiBold, Poppins;
        font-weight: 600;
        color: #000000;
        line-height: 40px;
      }
      .el-dialog__close {
        line-height: 40px;
        color: #000;
        font-weight: bold;
      }
    }
    .el-dialog__body {
      padding: 20px 32px;
      .send-feedback {
        .feedback-text {
          ::v-deep .el-textarea {
            font-size: 14px;
            .el-textarea__inner {
              padding: 15px 16px;
              line-height: 23px;
              border-radius: 8px;
              border-width: 2px;
              font-family: Poppins-Regular, Poppins;
            }
          }
        }
        .feedback-email {
          margin-top: 32px;
          ::v-deep .el-input {
            font-size: 14px;
            .el-input__inner {
              width: 100%;
              height: 56px;
              font-family: Poppins-Regular, Poppins;
            }
          }
        }
        .toFacebookPage {
          display: block;
          margin-top: 38px;
          color: #e86472;
          font-size: 14px;
          text-decoration: underline;
          font-family: Poppins-Medium, Poppins;
          font-weight: 500;
          line-height: 23px;
        }
        .submit {
          width: 193px;
          height: 46px;
          display: block;
          margin: 43px auto 16px;
          font-size: 20px;
          color: #ffffff;
          font-weight: 500;
          border-width: 0;
          background: linear-gradient(90deg, #ef6a59 0%, #e25177 100%);
          &.is-disabled {
            background: #999999;
          }
        }
      }
    }
  }
}
</style>
